<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view v-if="info.length > 0" class="lists">
				<view v-for="(item, index) in info" :key="index" class="items">
					<view class="lefts">
						<u--image :src="item.avatar" width="75" height="75" shape="circle"></u--image>
					</view>
					<view class="rights">
						<view class="name">
							<text>{{item.nickname}}</text>
							<!-- <view class="edit" @click="edit(item)">
								<u-icon name="edit-pen"></u-icon>
							</view> -->
						</view>
						<u-line></u-line>
						<view class="phone">
							<text>{{item.mobile}}</text>
							<view class="icon" @click="call(item)">
								<u-icon name="phone"></u-icon>
							</view>
						</view>
						<u-line></u-line>
						<view class="operate">
							<view class="lefts">
								<!-- <view class="terminals">
									<u--image :showLoading="true" src="/static/terminal.png" width="20" height="20"></u--image>
									<text>10</text>
								</view>
								<view class="gifts">
									<u--image :showLoading="true" src="/static/gift.png" width="20" height="20"></u--image>
									<text>10</text>
								</view> -->
							</view>
							<view class="rights">
								<view class="qrcodes" @click="qrcodes(item)">
									<u-icon name="grid" size="25" color="#2979ff"></u-icon>
								</view>
								<view class="dels" @click="dels(item)">
									<u-icon name="trash" size="25" color="#fa3534"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="info.length <= 0" mode="list" icon="../../../static/Empty/data_null.png" text="还没有业务人员"></u-empty>
			<view class="btn" @click="edit({})">
				<u-icon name="plus-circle" color="#ffffff" size="38"></u-icon>
			</view>
			<u-overlay :show="show" @click="show = false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<uqrcode ref="uqrcode" canvas-id="qrcode" :value="value" @complete="complete" :size="190">
						</uqrcode>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	export default {
		data() {
			return {
				show: false,
				loadding: true,
				avatar: '/static/default.jpg',
				customerinfo: {},
				info: [],
				is_true: true,
				value: '',
			}
		},
		onLoad(e) {
			this.customerinfo = uni.getStorageSync('customerinfo');
			this.getData()
		},
		onShow() {},
		methods: {
			complete() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
					}
				});
			},
			// 获取统计数据
			async getData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getAdminList',
					header: {
						'token': this.customerinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					res.data.map(item => {
						if (item.avatar == '') {
							item.avatar = this.avatar
						} else {
							item.avatar = util.API_URL + item.avatar
						}
					})
					this.info = res.data
				}
			},
			// 编辑业务员
			edit(item) {
				if (item.id) {
					uni.navigateTo({
						url: '/pages/customer/salesman/edit?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/customer/salesman/edit'
					})
				}
			},
			// 联系业务员
			call(item) {
				uni.makePhoneCall({
					phoneNumber: item.mobile
				});
			},
			// 查看二维码
			qrcodes(item) {
				this.value = util.WEB_URL + '/pages/public/customerbind?group_id=9&admin_id=' + item.id + '&name=' + item.nickname
				this.show = true
			},
			// 删除
			dels(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.delsFun(item)
						}
					}
				});
			},
			// 删除 - 方法
			async delsFun(item) {
				var that = this
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'v1/delAdmin',
						data: {
							admin_id: item.id
						},
						header: {
							'token': this.customerinfo.token
						}
					});
					this.is_true = true
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					if (res.code == 1) {
						setTimeout(function() {
							that.getData()
						}, 1500)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.all-main {
		.main {
			padding-bottom: 80rpx;

			.lists {
				padding: 20rpx;

				.items {
					background-color: #ffffff;
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.lefts {
						width: 25%;
						display: flex;
						align-items: center;
					}

					.rights {
						font-size: 28rpx;
						width: 75%;

						.name {
							display: flex;
							justify-content: space-between;
							padding-bottom: 10rpx;
							align-items: center;
						}

						.phone {
							display: flex;
							justify-content: space-between;
							padding: 10rpx 0;
							align-items: center;
						}

						.operate {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.lefts {
								padding-top: 10rpx;
								display: flex;
								justify-content: flex-start;
								.terminals {
									display: flex;
									justify-content: flex-start;
									text {
										padding-left: 10rpx;
										font-weight: bold;
										color: #2979ff;
										font-size: 32rpx;
									}
								}
								.gifts {
									padding-left: 40rpx;
									display: flex;
									justify-content: flex-start;
									text {
										padding-left: 10rpx;
										font-weight: bold;
										color: #fa3534;
										font-size: 32rpx;
									}
								}
							}
							.rights {
								padding-top: 10rpx;
								display: flex;
								justify-content: flex-end;
								
								.qrcodes {
									padding-right: 16rpx;
								}
							}
						}
					}
				}
			}

			.btn {
				z-index: 999;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 10rpx;
				background-color: #2979ff;
				color: #ffffff;
				text-align: center;
				display: flex;
				justify-content: center;
			}

			.warp {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}

			.rect {
				display: flex;
				width: 200px;
				height: 200px;
				background-color: #fff;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>